<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="<?php echo $tag['seo.keywords']; ?>" />
    <meta name="description" content="<?php echo $tag['seo.description'];  ?>" />
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="email=no">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <title><?php echo $tag['seo.title']; ?></title>
    <link rel="stylesheet" type="text/css" href="<?php echo $tag['path.skin']; ?>css/style.css" />
    <link rel="stylesheet" type="text/css" href="<?php echo $tag['path.skin']; ?>css/css.css" />
    <link rel="stylesheet" type="text/css" href="<?php echo $tag['path.skin']; ?>css/css_phone.css" />
    <link rel="stylesheet" type="text/css" href="<?php echo $tag['path.skin']; ?>css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="<?php echo $tag['path.skin']; ?>css/animate.min.css" />

    <!--JQ基础文件-->
    <script type="text/javascript" src="<?php echo $tag['path.skin']; ?>js/jquery-3.3.1.min.js"></script>

    <!--wow.js-->
    <script type="text/javascript" src="<?php echo $tag['path.skin']; ?>js/wow.js"></script>
    <script>
        var wow = new WOW({
            boxClass: 'wow',
            animateClass: 'animated',
            offset: 0,
            mobile: true,
            live: true
        });
        wow.init();
    </script>



</head>

<body>

<!-- 头部 -->
<div class="top clear">
    <div class="top_in">
        <div class="top_l">
            <a href="<?php echo $tag['path.root']; ?>/"><img src="<?php echo $tag['path.skin']; ?>images/logo.png" /></a>
        </div>
        <div class="top_r">
            <a href="###"><img class="wechat" src="<?php echo $tag['path.skin']; ?>images/top_ico1.png" /></a>
            <a href="https://weibo.com/p/1006066589919654/home?from=page_100606&mod=TAB#place" target="_blank"><img src="<?php echo $tag['path.skin']; ?>images/top_ico2.png" /></a>
            <div class="show_qr clear animated bounceIn">
                <?php doc_article('27',0,0,0,0,0,true,true,'id',0)?>
            </div>
        </div>
    </div>
</div>

<!-- 手机端头部 -->
<div class="top_phone iconfont">
    <div class="nav_phone">&#xe93e;</div>
    <div class="top_title_phone">康佳磐石首页</div>
</div>
<div class="height_11vw"></div>

<!-- 导航 -->
<div class="nav">
    <div class="nav_in">
        <ul class="clear">
            <li class="now">
                <a href="<?php echo $tag['path.root']; ?>/">首页</a>
            </li>
            <?php nav_main()?>
        </ul>
    </div>
</div>

<!-- 手机端导航 -->
<div class="nav_list_phone">
    <div class="nav_list_phone_t">
        <img src="<?php echo $tag['path.skin']; ?>images/logo_white.png" />
    </div>
    <ul class="iconfont">
        <li class="clear">
            <a href="###">
                <em>&#xeaf0;</em>
                <span>首页</span>
                <label>&#xe615;</label>
                <div class="clear"></div>
            </a>
        </li>
        <?php nav_main(1)?>
    </ul>
</div>
<div class="dark_bg"></div>


<!-- banner -->
<div class="banner">
    <div class="slider">
        <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width:1920px; height:628px;">
            <!-- Slides Container -->
            <div u="slides" class="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width:1920px; height:628px;">
                <?php doc_focus('4',5,0,0,0,true,'id',0)?>
            </div>
            <div data-u="navigator" class="slidetip">
                <div data-u="prototype" style="width:12px; height:12px; background-color:#a7a7a7; border-radius:12px;">
                </div>
            </div>
        </div>

    </div>
</div>

<!-- Swiper 手机端 -->
<div class="swiper-container swiper1">
    <div class="swiper-wrapper">
        <?php doc_focus('5',5,0,0,0,true,'id',0)?>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination swiper-pagination1"></div>
</div>

<!-- 快速链接 -->
<div class="idx_quick_link wow animated fadeInDown">
    <div class="idx_quick_link_in">
        <ul class="clear">
            <?php nav_sub(1,2)?>
        </ul>
    </div>
</div>

<!-- 品牌视频 -->
<div class="idx_video wow animated fadeInRight">
    <div class="idx_title">品牌视频</div>
    <div class="idx_video_in">
        <ul class="clear">
            <?php doc_focus('6',3,2,0,0,true,'ordering',0)?>
        </ul>
    </div>
</div>

<!-- 产品分类 -->
<div class="idx_pro wow animated fadeInLeft">
    <div class="idx_title">产品分类</div>
    <div class="idx_pro_t tab_t_all">
        <div class="idx_pro_t_in tab_t">
            <ul class="clear">
                <?php nav_sub(3,1,2);?>
            </ul>
        </div>
    </div>
    <div class="tab_b">
        <?php nav_sub(3,5,2);?>
    </div>
</div>

<!-- 应用案例 -->
<div class="idx_case wow fadeInUp">
    <div class="idx_title">应用案例</div>
    <div class="idx_case_t tab_t_all">
        <div class="idx_case_t_in tab_t">
            <ul class="clear">
                <?php nav_sub(4,1,2);?>
            </ul>
        </div>
    </div>
    <div class="tab_b">
        <?php nav_sub(4,4,2);?>
    </div>
</div>

<!-- 品牌动态 -->
<div class="idx_news clear wow animated fadeInUp">
    <div class="idx_title">品牌动态</div>
    <div class="idx_news_l">
        <div class="swiper-container swiper2">
            <div class="swiper-wrapper">
                <?php doc_list(127,8,2,0,0,0,true,false,'ordering',0)?>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination swiper-pagination2"></div>
        </div>
    </div>
    <div class="idx_news_r">
        <?php doc_list(128,8,3,0,0,0,true,false,'ordering',0)?>
    </div>
</div>

<!-- 底部导航 -->
<div class="bottom clear">
    <div class="bottom_in clear">
        <div class="bottom_l">
            <img class="logo_gray" src="<?php echo $tag['path.skin']; ?>images/logo_gray.png" />
            <dl class="clear">
                <dt><?php doc_article('27',0,0,0,0,0,true,true,'id',0)?></dt>
                <dd>
                    <div>
                        <?php doc_article('25',0,0,0,0,0,true,true,'id',0)?>
                    </div>
                </dd>
            </dl>
            <div class="bottom_l_b">
                <?php doc_article('26',0,0,0,0,0,true,true,'id',0)?>
            </div>
        </div>
        <div class="bottom_r clear">
            <?php nav_main(2)?>
        </div>
    </div>
</div>

<!-- 弹出顶部二维码 -->
<script>
    $(function(){
        $('.wechat').mouseover(function(){
            $('.show_qr').show();
        });
        $('.wechat').mouseout(function(){
            $('.show_qr').hide();
        });
    });
</script>

<!-- 电脑端二级导航 -->
<script>
    $(function(){
        $('.nav_in ul li').mouseover(function(){
            $(this).children('ul').show();
        });
        $('.nav_in ul li').mouseout(function(){
            $(this).children('ul').hide();
        });
    });
</script>

<!-- banner js -->
<script src="<?php echo $tag['path.skin']; ?>js/jssor.slider-22.0.15.min.js"></script>
<script>
    jQuery(document).ready(function ($) {
        var _SlideshowTransitions = [
            { $Duration: 1200, y: -0.3, $Cols: 2, $SlideOut: true, $ChessMode: { $Column: 12 }, $Easing: { $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 },
            { $Duration: 1000, y: 4, $Zoom: 11, $Easing: { $Top: $JssorEasing$.$EaseInCubic, $Zoom: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseOutQuad }, $Opacity: 2 },
            { $Duration: 1200, y: 1, $Rows: 2, $Zoom: 1, $ChessMode: { $Row: 15 }, $Easing: { $Top: $JssorEasing$.$EaseInCubic, $Zoom: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Assembly: 2049, $Opacity: 2 },
            { $Duration: 1500, x: -1, y: 0.5, $Delay: 60, $Cols: 8, $Rows: 4, $Formation: $JssorSlideshowFormations$.$FormationSquare, $Easing: { $Left: $JssorEasing$.$EaseSwing, $Top: $JssorEasing$.$EaseInWave }, $Assembly: 260, $Round: { $Top: 1.5 } },
            { $Duration: 600, x: -1, y: -1, $Delay: 50, $Cols: 8, $Rows: 4, $SlideOut: true, $Formation: $JssorSlideshowFormations$.$FormationZigZag, $ChessMode: { $Column: 3, $Row: 12 }, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseOutQuad }, $Assembly: 1028, $Opacity: 2 },
            { $Duration: 1000, x: -0.5, y: 0.5, $Zoom: 1, $Rotate: 1, $SlideOut: true, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Top: $JssorEasing$.$EaseInCubic, $Zoom: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInCubic }, $Opacity: 2, $Round: { $Rotate: 0.5 } },
            { $Duration: 1800, x: 1, y: 0.2, $Delay: 30, $Cols: 10, $Rows: 5, $Clip: 15, $During: { $Left: [0.3, 0.7], $Top: [0.3, 0.7] }, $SlideOut: true, $Reverse: true, $Formation: $JssorSlideshowFormations$.$FormationStraightStairs, $Easing: { $Left: $JssorEasing$.$EaseInOutSine, $Top: $JssorEasing$.$EaseOutWave, $Clip: $JssorEasing$.$EaseInOutQuad }, $Assembly: 2050, $Round: { $Top: 1.3 } },
            { $Duration: 1800, x: 1, $Delay: 30, $Cols: 10, $Rows: 5, $Clip: 15, $During: { $Left: [0.3, 0.7] }, $SlideOut: true, $Formation: $JssorSlideshowFormations$.$FormationStraightStairs, $Easing: { $Left: $JssorEasing$.$EaseInOutExpo, $Clip: $JssorEasing$.$EaseInOutQuad }, $Assembly: 260, $Outside: true, $Round: { $Top: 0.8 } },
            { $Duration: 1800, x: 1, $Delay: 30, $Cols: 10, $Rows: 5, $Clip: 15, $During: { $Left: [0.3, 0.7] }, $Formation: $JssorSlideshowFormations$.$FormationStraightStairs, $Easing: { $Left: $JssorEasing$.$EaseInOutExpo, $Clip: $JssorEasing$.$EaseInOutQuad }, $Assembly: 260, $Outside: true, $Round: { $Top: 0.8 } },
            { $Duration: 1500, x: 0.3, y: -0.3, $Delay: 20, $Cols: 8, $Rows: 4, $Clip: 15, $During: { $Left: [0.1, 0.9], $Top: [0.1, 0.9] }, $SlideOut: true, $Formation: $JssorSlideshowFormations$.$FormationSwirl, $Easing: { $Left: $JssorEasing$.$EaseInJump, $Top: $JssorEasing$.$EaseInJump, $Clip: $JssorEasing$.$EaseOutQuad }, $Assembly: 260, $Outside: true, $Round: { $Left: 0.8, $Top: 2.5 } },
            { $Duration: 1200, x: 2, y: 1, $Cols: 2, $Zoom: 11, $Rotate: 1, $ChessMode: { $Column: 15 }, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Top: $JssorEasing$.$EaseInCubic, $Zoom: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseOutQuad, $Rotate: $JssorEasing$.$EaseInCubic }, $Assembly: 2049, $Opacity: 2, $Round: { $Rotate: 0.7 } },
            { $Duration: 1000, $Rows: 6, $Clip: 4, $Move: true },
            { $Duration: 800, $Delay: 150, $Cols: 10, $Clip: 1, $Move: true, $Formation: $JssorSlideshowFormations$.$FormationCircle, $Easing: $JssorEasing$.$EaseInBounce, $Assembly: 264 },
            { $Duration: 600, x: -1, y: 1, $Delay: 30, $Cols: 8, $Rows: 4, $Formation: $JssorSlideshowFormations$.$FormationStraightStairs, $Easing: { $Left: $JssorEasing$.$EaseInQuart, $Top: $JssorEasing$.$EaseInQuart, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 }

        ];
        var options = {
            $AutoPlay: true,
            $SlideshowOptions: {
                $Class: $JssorSlideshowRunner$,
                $Transitions: _SlideshowTransitions,
                $TransitionsOrder: 1,
                $ShowLink: true
            },
            $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$
            },
            $BulletNavigatorOptions: {
                $Class: $JssorBulletNavigator$
            }
        };
        var jssor_slider1 = new $JssorSlider$('slider1_container', options);
    });
</script>
<script>
    $(function(){
        var slide_w = $('.slidetip').width();
        var slide_mgl = slide_w / 2 * -1;
        $('.slidetip').css('margin-left',slide_mgl)
    });
</script>

<!-- 手机端显示导航 -->
<script>
    $(function () {
        $('.nav_phone').click(function () {
            $('.dark_bg').show()
            $('.nav_list_phone').show()
            $('.nav_list_phone').removeClass('animated fadeOutLeft')
            $('.nav_list_phone').addClass('animated fadeInLeft')
        });
        $('.dark_bg').click(function () {
            $('.dark_bg').fadeOut()
            $('.nav_list_phone').removeClass('animated fadeInLeft')
            $('.nav_list_phone').addClass('animated fadeOutLeft')
        });
    });
</script>

<!-- 手机端二级导航 -->
<script>
    $(function(){
        $('.nav_list_phone ul li').click(function(){
            if($(this).hasClass('now') == false){
                $(this).addClass('now');
                $(this).children('ul').slideDown();
                $(this).children('label').addClass('rotate');
                $(this).children('label').removeClass('rotate1');

                $(this).nextAll('li').removeClass('now')
                $(this).nextAll('li').children('ul').slideUp();
                $(this).nextAll('li').children('label').removeClass('rotate');
                $(this).nextAll('li').children('label').addClass('rotate1');

                $(this).prevAll('li').removeClass('now')
                $(this).prevAll('li').children('ul').slideUp();
                $(this).prevAll('li').children('label').removeClass('rotate');
                $(this).prevAll('li').children('label').addClass('rotate1');
            }
            else if($(this).hasClass('now') == true){
                $(this).removeClass('now');
                $(this).children('ul').slideUp();
                $(this).children('label').removeClass('rotate');
                $(this).children('label').addClass('rotate1');
            }
        });
    });
</script>

<!-- Swiper JS -->
<script src="<?php echo $tag['path.skin']; ?>dist/js/swiper.min.js"></script>

<!-- Initialize Swiper -->
<link rel="stylesheet" href="<?php echo $tag['path.skin']; ?>dist/css/swiper.min.css">
<script>
    // 手机端 banner
    var swiper1 = new Swiper('.swiper1', {
        pagination: '.swiper-pagination1',
        paginationClickable: true,
        spaceBetween: 0,
        autoplay: 2500,
        autoplayDisableOnInteraction: false
    });
    // 首页品牌动态滚动
    var swiper2 = new Swiper('.swiper2', {
        pagination: '.swiper-pagination2',
        paginationClickable: true,
        spaceBetween: 0,
        autoplay: 2500,
        autoplayDisableOnInteraction: false
    });
</script>

<!-- tab -->
<script>
    $(function(){
        $('.tab_t ul li').click(function(){
            var idx = $(this).index()
            $(this).addClass('now')
            $(this).nextAll('li').removeClass('now')
            $(this).prevAll('li').removeClass('now')
            $(this).parent('ul').parent('.tab_t').parent('.tab_t_all').next('.tab_b').children('.tab_b_content').eq(idx).show()
            $(this).parent('ul').parent('.tab_t').parent('.tab_t_all').next('.tab_b').children('.tab_b_content').eq(idx).nextAll('.tab_b_content').hide()
            $(this).parent('ul').parent('.tab_t').parent('.tab_t_all').next('.tab_b').children('.tab_b_content').eq(idx).prevAll('.tab_b_content').hide()
        });
    });
</script>

<!-- 显示案例详情 -->
<script>
    $(function(){
        $('.idx_case_b_in ul li a').mouseover(function(){
            $(this).children('div').stop().fadeIn()
        });
        $('.idx_case_b_in ul li a').mouseout(function(){
            $(this).children('div').stop().fadeOut()
        });
    });
</script>


</body>
</html>
